<template>
  <div class="tabs">
    <a-tabs v-model:activeKey="activeKey" destroy-inactive-tab-pane :class="{ 'has-border': showTabContentBorder }">
      <a-tab-pane v-for="tab in tabs" :key="tab.key" :tab="tab.name">
        <api-module v-if="activeKey === '1'" />
        <sdk-module v-else-if="activeKey === '2'" />
        <app-module v-else-if="activeKey === '3'" />
        <app-check-module v-else-if="activeKey === '4'" />
        <life-module v-else-if="activeKey === '5'" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup lang="ts">
  import { computed, inject, ref, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  import ApiModule from './api.vue'
  import AppModule from './app.vue'
  import AppCheckModule from './app-check.vue'
  import LifeModule from './life.vue'
  import SdkModule from './sdk.vue'

  const route = useRoute()
  const router = useRouter()
  const clientId = inject('clientId') as string

  const activeKey = ref((route.query.tabKey as string) || '1')
  const tabs = [
    {
      key: '1',
      name: 'API服务'
    },
    {
      key: '2',
      name: 'SDK服务'
    },
    {
      key: '3',
      name: '应用列表'
    },
    {
      key: '4',
      name: '应用审核记录'
    },
    {
      key: '5',
      name: '生命周期'
    }
  ]
  //这两个tab的content部分需要边框
  const showTabContentBorder = computed(() => ['5', '6'].includes(activeKey.value))

  watch(activeKey, val => {
    router.replace({
      query: {
        id: clientId,
        tabKey: val
      }
    })
  })
</script>

<style lang="less" scoped>
  .tabs {
    display: flex;
    overflow: hidden;
    height: 100%;
    flex: 1;

    .ant-tabs {
      width: 100%;

      :deep(.ant-tabs-content-holder) {
        overflow-y: auto;
      }

      &.has-border {
        :deep(.ant-tabs-content-holder) {
          border: 1px solid @border1;
          border-radius: 6px;
        }
      }
    }
  }

  :deep(.ant-tabs-top > .ant-tabs-nav::before) {
    border: none;
  }
</style>
